<script setup lang="ts">
import { computed } from "vue";

import {} from "qqlx-core";
import {} from "qqlx-cdk";

const vueProps = defineProps<{
  length: number;
  max: number;
  pending?: boolean;
}>();

const addonValue = computed(() => {
  const max = vueProps.max;
  const len = vueProps.length;

  const addon = len % max;
  return len < max ? max - len : addon === 0 ? 0 : max - addon;
});
</script>

<template>
  <div v-for="Nothing of Array(addonValue).fill(null)" class="rounded cursor-not-allowed" :class="[pending ? 'bg-skeleton' : 'opacity-20 bg-secondary']">
    <slot></slot>
  </div>
</template>

<style scoped>
.bg-skeleton {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, #fff 50%, rgba(0, 0, 0, 0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
}

@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}
</style>
